<ng-container *ngIf="!isScoreImprovement; else scoreImprovement">
  <app-network-rules-printable-report
    #networkRulePrintableReport
    *ngIf="isPrinting && eof && !isNetworkRuleDirty()"
    class="printable-area"
    [networkRules]="networkRules">
  </app-network-rules-printable-report>
  <div class="screen-area">
    <div
      class="d-flex justify-content-between align-items-center"
      *ngIf="
        source !== navSource['GROUP'] && source !== navSource['FED_POLICY']
      ">
      <h1 class="font-weight-light" id="networkRulesTitle">
        {{ 'policy.head.TITLE' | translate }}
      </h1>

      <div class="d-flex justify-content-end align-items-center">
        <button
          *ngIf="eof && networkRules.length > 1 && !isNetworkRuleDirty()"
          class=""
          mat-button
          (click)="print()">
          <em class="eos-icons icon-18">print</em>
        </button>
        <button
          *ngIf="eof && networkRules.length > 1 && !isNetworkRuleDirty()"
          class=""
          mat-button
          (click)="exportCsv()">
          <em class="eos-icons icon-18">csv_file</em>
        </button>
        <ng-container *ngIf="!isNetworkRuleDirty()">
          <app-loading-button
            (btnClick)="refresh()"
            [disabled]="!!(refreshing$ | async)"
            [appearance]="'mat-button'"
            [buttonClasses]="'d-flex justify-content-center align-items-center'"
            [iconClasses]="'eos-icons icon-18'"
            [iconName]="'refresh'"
            [id]="'networkRules-refresh-button'"
            [loading]="!!(refreshing$ | async)"
            [text]="'network.REFRESH' | translate"
            [type]="'button'">
          </app-loading-button>
        </ng-container>
      </div>
    </div>
    <div
      [ngClass]="{
        panel: source === navSource['SELF'],
        mb0: source === navSource['SELF']
      }">
      <div [ngClass]="{ 'panel-body': source === navSource['SELF'] }">
        <div style="height: 71px" *ngIf="source !== navSource['GROUP']">
          <div class="d-flex justify-content-between align-items-center">
            <div class="d-flex justify-content-start align-items-center">
              <span class="font-weight-bold text-info">
                <span *ngIf="filtered">
                  {{ 'enum.FOUND' | translate }}
                  {{ filteredCount }}&nbsp;/
                </span>
                <span *ngIf="!filtered" >
                  {{ 'enum.OUT_OF' | translate }}&nbsp;
                </span>
                {{ ruleCount }}
              </span>

            </div>
            <div class="d-flex justify-content-end align-items-center">
              <button
                *ngIf="
                  selectedNetworkRules.length > 0 &&
                  isWriteGlobalRulesAuthorized &&
                  !isIncludingCRD &&
                  !isIncludingFed
                "
                class="mr-2"
                mat-stroked-button
                (click)="removeNetworkRules()">
                <em class="eos-icons icon-18">delete</em>
                {{ 'policy.toolBar.REMOVE' | translate }}
              </button>
              <button
                *ngIf="
                  selectedNetworkRules.length > 0 &&
                  isWriteGlobalRulesAuthorized &&
                  !isIncludingCRD &&
                  !isIncludingFed
                "
                class="mr-2"
                mat-stroked-button
                (click)="openMoveNetworkRulesModal()">
                <em class="eos-icons icon-18">move</em>
                {{ 'policy.toolBar.MOVE_TO' | translate }}
              </button>
              <ng-container *appDisplayControl="'multi_cluster'">
                <button
                  *ngIf="
                    selectedNetworkRules.length > 0 &&
                    !containsUnpromotableEndpoint &&
                    isWriteNetworkRuleAuthorized &&
                    source !== navSource['FED_POLICY'] &&
                    !isIncludingFed
                  "
                  class="mr-2"
                  mat-stroked-button
                  (click)="promoteRuleOnTop()">
                  <em class="eos-icons icon-18">navigation</em>
                  {{ 'policy.PROMOTE' | translate }}
                </button>
              </ng-container>
              <button
                *ngIf="isNetworkRuleDirty() && isWriteGlobalRulesAuthorized"
                class="mr-2"
                mat-stroked-button
                (click)="refresh()">
                <em class="eos-icons icon-18">replay</em>
                {{ 'policy.toolBar.UNDO' | translate }}
              </button>
              <button
                *ngIf="isNetworkRuleDirty() && isWriteGlobalRulesAuthorized"
                class="mr-2"
                mat-raised-button
                color="primary"
                (click)="submit()">
                <em class="eos-icons icon-18">save</em>
                {{ 'policy.toolBar.SAVE' | translate }}
              </button>
              <button
                class="mr-3"
                mat-stroked-button
                *appDisplayControl="'write_network_rule'"
                (click)="addNetworkRuleToTop()">
                <em class="eos-icons icon-18">add_circle</em>
                {{ 'policy.toolBar.INSERT_TO_TOP' | translate }}
              </button>
              <app-quick-filter
                class="pull-right"
                (filterCountChange)="filterCountChanged($event)"
                [gridOptions]="gridOptions"
                [showCount]="false">
              </app-quick-filter>
              <div *ngIf="filteredCount <= 1" style="height: 71px"></div>
              <ng-container
                *ngIf="
                  (eof || networkRuleErr) &&
                  !isNetworkRuleDirty() &&
                  source === navSource['FED_POLICY']
                ">
                <app-loading-button
                  (btnClick)="refresh()"
                  [appearance]="'mat-button'"
                  [buttonClasses]="
                    'd-flex justify-content-center align-items-center'
                  "
                  [iconClasses]="'eos-icons icon-18'"
                  [iconName]="'refresh'"
                  [id]="'networkRules-refresh-button'"
                  [text]="'network.REFRESH' | translate"
                  [type]="'button'">
                </app-loading-button>
              </ng-container>
            </div>
          </div>
        </div>

        <div *ngIf="source === navSource['GROUP']" class="clearfix">
          <app-quick-filter
            *ngIf="!useQuickFilterService"
            class="pull-right"
            [gridOptions]="gridOptions"
            [filteredCount]="filteredCount"
            [showCount]="false">
          </app-quick-filter>
        </div>
        <ag-grid-angular
          id="policy-grid"
          style="width: 100%"
          [ngStyle]="{
            height:
              (source === navSource['GROUP']
                ? resizableHeight - 90
                : gridHeight) + 'px'
          }"
          class="ag-theme-balham"
          [gridOptions]="gridOptions"
          [context]="context">
        </ag-grid-angular>
      </div>
    </div>
  </div>
</ng-container>
<ng-template #scoreImprovement>
  <div class="mt-2">
    <ag-grid-angular
      [ngStyle]="{ height: resizableHeight + 'px' }"
      [gridOptions]="gridOptions"
      [context]="context"
      id="score-improvement-policy-grid"
      style="width: 100%"
      class="ag-theme-balham">
    </ag-grid-angular>
  </div>
</ng-template>

<ng-template #readonlyNotification let-readonlyNotificationMsgs="readonlyNotification">
  <div [innerHTML]="readonlyNotificationMsgs.message"></div>
</ng-template>
